<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>门户管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
 		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  		<style>
  			.layui-form-label{width: 90px;}
  			.layui-input-block{margin-left: 125px;}
  			.layui-upload-img{width: 420px;height: 92px;margin: 0 10px 10px 0;}
  			.layui-table-link{text-decoration: underline;}
  			.layui-table-link:hover{color:#e18806;}
  		</style>
	</head>
	<body>
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" action="" lay-filter="component-form-group" style="padding: 10px 0 0 0;">
						<div class="layui-form-item">
								<div  class="layui-inline">
									<label class="layui-form-label">编号</label>
						            <div class="layui-input-block">
						              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入编号" class="layui-input">
						            </div>
								</div>
								<div  class="layui-inline">
									<label class="layui-form-label">网站名称</label>
								    <div class="layui-input-block">
						              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入网站名称" class="layui-input">
						            </div>
								</div>
								<div  class="layui-inline">
									<button class="layui-btn"><i class="layui-icon">&#xe615;</i>查询</button>
								</div>
					    </div>
					</form>
					<hr>
					<div class="layui-btn-group demoTable" style="margin-bottom: 5px;">
					  <button class="layui-btn layui-btn-primary " data-type="add"><i class="layui-icon">&#xe654;</i>新增</button>
					  <button class="layui-btn layui-btn-primary "><i class="layui-icon">&#x1006;</i>批量禁用</button>
					  <button class="layui-btn layui-btn-primary "><i class="layui-icon">&#xe605;</i>批量启用</button>
					  <!--<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
					  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
					  <button class="layui-btn" data-type="isAll">验证是否全选</button>-->
					</div>
					<table class="layui-table" lay-data="{cellMinWidth: 80,width:'100%',height:472, url:'./data/data.json', page:true, id:'idTest',even: true}" lay-filter="demo">
					  <thead>
					    <tr>
					      <th lay-data="{type:'checkbox'}"></th>
					      <th lay-data="{field:'id', width:80, sort: true}">编号</th>
					      <th lay-data="{field:'domain', width:220, templet: '#domainTpl'}">域名</th>
					      <th lay-data="{field:'title', width:250}">网站名称</th>
					      <th lay-data="{field:'img', width:250}">网站头部图片</th>
					      <th lay-data="{field:'column',width:420}">隶属页面</th>
					      <th lay-data="{ align:'center', toolbar: '#barDemo',fixed: 'right',width:320}">操作</th>
					    </tr>
					  </thead>
					</table>
					<script type="text/html" id="domainTpl">
					  <a href="http://zszhongkai.3322.org:7190/" class="layui-table-link" target="_blank">{{ d.domain }}</a>
					</script>
					<script type="text/html" id="barDemo">
					  <!--<a class="layui-btn layui-btn-xs  layui-btn-warm" lay-event="columns" data-type="tabAdd"><i class="layui-icon">&#xe60a;</i>页面管理</a>-->
					  <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe63c;</i>详情</a>
					  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
					  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
					</script>
					<div id="addModal"  style="display: none;">
						<form class="layui-form" action="" lay-filter="component-form-group" style="margin: 10px;">
							<div class="layui-form-item">
					       		<label class="layui-form-label">门户标题</label>
						        <div class="layui-input-block">
						            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						        </div>
					       </div>
							<div class="layui-form-item">
								<label class="layui-form-label">是否有效</label>
								<div class="layui-input-block">
								    <select name="city" lay-verify="required">
								        <option value=""></option>
								        <option value="0">失效</option>
								        <option value="1">有效</option>
								    </select>
								</div>
					      	</div>
					      	<div class="layui-form-item">
								<label class="layui-form-label">根网址</label>
								<div class="layui-input-block">
						            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入根网址" class="layui-input">
						            <p>(需加 http://，一级或二级域名的根网址)</p>
						        </div>
					      	</div>
					      	<div  class="layui-form-item">
					      		<label class="layui-form-label">头部图片</label>
						        <div class="layui-input-block">
						        	<div class="layui-upload">
									  <button type="button" class="layui-btn" id="test1">上传图片</button>
									  <div class="layui-upload-list">
									    <img class="layui-upload-img" id="demo1">
									    <p id="demoText"></p>
									  </div>
									</div>
						        </div>
					      	</div>
					      	
					      	<div class="layui-form-item">
							    <div class="layui-input-block" style="text-align: center;margin-left: 0px;">
							      <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
							      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
							    </div>
							</div>
						</form>
					</div>
					<div id="colunms"  style="display: none;">
						<form class="layui-form" action="" lay-filter="component-form-group" style="margin: 10px;">
							<div  class="layui-form-item">
					      		<label class="layui-form-label">显示栏目</label>
					      		<div class="layui-input-block">
								    <input type="radio" name="class" value="新闻动态" title="新闻动态">
								    <input type="radio" name="class" value="政务公开" title="政务公开">
								    <input type="radio" name="class" value="政策法规" title="政策法规">
								    <input type="radio" name="class" value="督查督办" title="督查督办">
								    <input type="radio" name="class" value="月度排行" title="月度排行">
								</div>
					      	</div>
					      	<div  class="layui-form-item">
					      		<label class="layui-form-label">自定义栏目名称</label>
					      		<div class="layui-input-block">
								    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入自定义栏目名称" class="layui-input">
								</div>
					      	</div>
					      	<div class="layui-form-item">
					       		<div  class="layui-inline">
									<label class="layui-form-label">栏目位置号</label>
						            <div class="layui-input-block">
						              <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入位置号" class="layui-input">
						            </div>
								</div>
								<div  class="layui-inline">
									<label class="layui-form-label">栏目显示位置</label>
								    <div class="layui-input-block">
								      <select name="city" lay-verify="required">
								        <option value=""></option>
								        <option value="0">左</option>
								        <option value="1">右</option>
								      </select>
								    </div>
								</div>
					       </div>
					       <div class="layui-form-item">
							    <div class="layui-input-block" style="text-align: center;margin-left: 0px;">
							      <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
							      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
							    </div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script src="../../layuiadmin/layui/layui.js"></script>  
		<script>
			layui.use(['form','table','upload','element'], function(){
			  var form = layui.form;
			  var table = layui.table;
			  var $ = layui.jquery
 			 ,upload = layui.upload,element = layui.element;
			  
			  //普通图片上传
			  var uploadInst = upload.render({
			    elem: '#test1'
			    ,url: '/upload/'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#demo1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  
			   //监听表格复选框选择
			  table.on('checkbox(demo)', function(obj){
			    console.log(obj)
			  });
			  //监听工具条
			  table.on('tool(demo)', function(obj){
			    var data = obj.data;
			    if(obj.event === 'detail'){
			      layer.msg('ID：'+ data.id + ' 的查看操作');
			    } else if(obj.event === 'del'){
			      layer.confirm('真的删除行么', function(index){
			        obj.del();
			        layer.close(index);
			      });
			    } else if(obj.event === 'edit'){
			      layer.alert('编辑行：<br>'+ JSON.stringify(data))
			    }
			  });
			  
			  var $ = layui.$, active = {
			    getCheckData: function(){ //获取选中数据
			      var checkStatus = table.checkStatus('idTest')
			      ,data = checkStatus.data;
			      layer.alert(JSON.stringify(data));
			    }
			    ,getCheckLength: function(){ //获取选中数目
			      var checkStatus = table.checkStatus('idTest')
			      ,data = checkStatus.data;
			      layer.msg('选中了：'+ data.length + ' 个');
			    }
			    ,isAll: function(){ //验证是否全选
			      var checkStatus = table.checkStatus('idTest');
			      layer.msg(checkStatus.isAll ? '全选': '未全选')
			    }
			  };
			  
			  $('.demoTable .layui-btn').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			  });
			  
			  
			  	$('[data-type="add"]').on('click', function(){
					layer.open({
					  type: 1,
					  area: ['600px', '500px'],
					  fixed: false, //不固定
					  maxmin: true,
					  content: $('#addModal')
					});
				});
				$('[lay-event="columns"]').on('click',function(){
					layer.open({
					  type: 2,
					  area: ['700px', '550px'],
					  fixed: false, //不固定
					  maxmin: true,
					  content: 'menu.html'
					});
				});
			});
		</script>
	</body>
</html>
